<template>
  <div>
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col>
          <div class="before">
            <el-button size="small" type="primary" @click="addRole">添加页面</el-button>
          </div>
        </el-col>
        <el-col>
          <!-- <el-input v-model="input" placeholder="请输入关键字" /> -->
          <el-input v-model="nameInput" placeholder="请输入关键字" />
        </el-col>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <!-- <el-button @click="onSubmit">筛选</el-button> -->
            <el-button @click="submitSearch">筛选</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
    <!-- 表格 -->
    <el-table border :data="tableData" row-key="id">
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="content" label="内容">
        <template v-slot="{row}">
          <div v-html="row.content" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{row}">
          <el-button type="primary" size="small" @click="editRole(row.id)">编辑</el-button>
          <el-button
            type="danger"
            size="small"
            @click="delRole(row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row type="flex" justify="center"><el-pagination
      :page-size="pageConfig._limit"
      :pagercount="7"
      layout="prev, pager, next"
      :total="total"
      class="one"
      @current-change="currentChange"
    />
    </el-row>

    <!-- 添加页面 -->
    <AddClassification ref="AddClassification" :show-dialog.sync="visibleDialog" />
  </div>
</template>

<script>
import AddClassification from './addClassification/index.vue'
import { getPagesInterface, delPagesInterface, getPageById, queryPageById, getPagesInterNumber } from '@/api/interface/pagesInterface'
export default {
  components: { AddClassification },
  data() {
    return {
      // 分页参数
      pageConfig: {
        _limit: 2,
        _start: 0
      },
      // 前端概念当中的页码
      page: 1,
      total: 0,
      // 筛选相关
      nameInput: '',
      visibleDialog: false,
      // input: '',
      tableData: []
      // ruleForm: {}
    }
  },
  async created() {
    this.getPagesInterface()
    this.getPagesInterNumber()
  },
  methods: {
    // 查询
    submitSearch() {
      // 获取数据
      this.getPagesInterface()
      // 获取数量
      this.getPagesInterNumber()
    },
    currentChange(newPage) {
      this.page = newPage
      // 当前下标等于上一页最后下标的后一个，把页码减一，乘以每页条数即可
      this.pageConfig._start = (this.page - 1) * this.pageConfig._limit
      this.getPagesInterface()
    },
    // 页面数量
    async getPagesInterNumber() {
      const { data } = await getPagesInterNumber({
        title_contains: this.nameInput || null
      })
      this.total = data
    },
    // // 查询
    // async onSubmit() {
    //   const res = await queryPageById(this.input)
    //   console.log(68, res)
    //   this.tableData = res.data
    //   // console.log('submit!')
    // },
    // 编辑页面 回填数据
    async editRole(id) {
      // 显示弹窗
      this.visibleDialog = true
      // 实现数据回填
      const res = await getPageById(id)
      console.log(71, res)
      this.$refs.AddClassification.ruleForm = res.data[0]
    },
    // 删除页面
    delRole(id) {
      this.$confirm('确认删除该角色？', '删除', {
        type: 'warning'
      }).then(async() => {
        // console.log('点击了确定按钮')
        await delPagesInterface(id)
        // 更新列表
        this.getPagesInterface()
      }).catch(() => {
        console.log('点击了取消按钮')
      })
    },
    // 添加页面
    addRole() {
      this.visibleDialog = true
    },
    async getPagesInterface() {
      // 渲染列表
      const res = await getPagesInterface({
        ...this.pageConfig,
        title_contains: this.nameInput || null
      })
      this.tableData = res.data
    }
  }
}
</script>

<style lang="scss">
.one{
  margin-top: 20px;
  text-align: center;
}
</style>
